<template>
	<div class="iconList">
		<div class="wrapper clearfix">
			  <div class="icon clearfix" v-for='item of iconImg' :key='item.id' @click="gotoPath(item.path)">
				  <div class="icon_img"><img class='img' :src="item.imgUrl"></div>
				  <div class="icon_desc">{{item.Desc}}</div>
			  </div>
		</div>
	</div>
  
</template>

<script>
export default {
  name: 'homeIconBtn',
  data(){
	  return{
		  iconImg:[
			  {
				  id:'001',
				  imgUrl:'//pic5.40017.cn/01/000/5f/a6/rBLkBVqozbiAB7whAAABMV8dFnU373.png',
				  Desc:'汽车票·船票',
				  path:'/'
			  },
			  {
			      id:'002',
			      imgUrl:'//pic5.40017.cn/01/001/5f/aa/rBLkBVqoz5WARL6sAAACl0BdhXo397.png',
				  Desc:'周边自由行',
				  path:'/travelhome'
			  },
			  {
			      id:'003',
			      imgUrl:'//pic5.40017.cn/01/001/5f/a7/rBLkBVqozh6AXAIqAAABODWYrvg233.png',
				  Desc:'周边跟团游',
				   path:'/'
			  },
			  {
			      id:'004',
			      imgUrl:'//pic5.40017.cn/01/001/5f/34/rBANC1qoz0yAN8dqAAABQG6IdnQ608.png',
				  Desc:'国内游',
				   path:'/'
			  },
			  {
			      id:'005',
			      imgUrl:'//pic5.40017.cn/01/000/5f/35/rBANC1qoz5-AZ1AHAAABu7UlTDA659.png',
				  Desc:'邮轮',
				   path:'/'
			  },
			  {
			      id:'006',
			      imgUrl:'//pic5.40017.cn/01/000/5f/ab/rBLkBlqo0GKARZ0jAAACzlV1vD0332.png',
				  Desc:'出境游',
				   path:'/'
			  },
			  {
			      id:'007',
			      imgUrl:'//pic5.40017.cn/02/000/5f/b2/rBLkCFqo0GKAV-H4AAACCoRioMc656.png',
				  Desc:'海外玩乐',
				   path:'/'
			  },
			  {
			      id:'008',
			      imgUrl:'//pic5.40017.cn/01/001/5f/ac/rBLkBVqo0MOAHG9GAAABfaEIhkw016.png',
				  Desc:'签证',
				   path:'/'
			  },
			  {
			      id:'009',
			      imgUrl:'//pic5.40017.cn/02/000/5f/b3/rBLkCFqo0MOANBZZAAACayFwVMA823.png',
				  Desc:'全球WiFi',
				   path:'/'
			  },
			  {
			      id:'010',
			      imgUrl:'//pic5.40017.cn/02/001/5f/b3/rBLkCFqo0MOAazKPAAABDjXiKXA355.png',
				  Desc:'全部服务',
				   path:'/'
			  }
		  ]
	  }
  },
  methods:{
	  gotoPath(path){
		  this.$router.push(path)
	  }
  }
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.iconList
	width:100%
	.wrapper
		width:90%
		margin:0 auto
		.icon
			float:left
			width:20%
			margin:15px auto
			.img
				display:block
				margin:0 auto
				width:50%
			.icon_desc
				padding:10px 0 0 0
				text-align:center
				font-size:0.2rem
.clearfix:after
	display:block
	content:''
	clear:both
</style>
